<template>
	<transition name="slide-fade">
		<div class="toast-cart" v-show="this.cartShow">
			<section class="cart">
				<div class="nav">
					<div class="content">
						<ul class="lh30 clearfix fs18 swiper-pagination" slot="pagination">
							<li class="lh30 pl10 pr10 fl">市价</li>
							<li class="lh30 pl10 pr10 fl">高级</li>
							<li class="lh30 pl10 pr10 fl">挂单</li>
						</ul>
					</div>
					<p class="line mt10"></p>
					<div class="lh30 tr mt5 mr10 close" @click="hideCart">
						<span class="iconfont icon-guanbi1"></span>
					</div>
				</div>
				<main>
					<swiper :options="swiperOption" ref="mySwiper">
						<swiper-slide>
							<Bases></Bases>
						</swiper-slide>
						<swiper-slide>
							<High></High>
						</swiper-slide>
						<swiper-slide>
							<Hang :mode="mode"></Hang>
						</swiper-slide>
					</swiper>
				</main>
			</section>
		</div>
	</transition>
</template>
<script>
import Bases from './base.vue'
import High from './high.vue'
import Hang from './hang.vue'
import axios from 'axios'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

import { mapState, mapMutations } from 'vuex'
export default {
	name: 'Cart',
	data() {
		return {
			current: 0,
			mode: 5,
			swiperOption: {
				lazy: true,
				grabCursor: true,
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
					renderBullet(index, className) {
						switch (index) {
							case 0:
								var text = '市价'
								return `<li class="${className} item">${text}</li>`
							case 1:
								var text = '高级'
								return `<li class="${className} item">${text}</li>`
							case 2:
								var text = '挂单'
								return `<li class="${className} item">${text}</li>`
							default:
						}
					}
				},
				direction: 'horizontal'
			}
		}
	},
	components: {
		'swiper-slide': swiperSlide,
		swiper,
		Bases,
		High,
		Hang
	},
	mounted() {
		this.getOrdreMode()
	},
	computed: {
		...mapState(['cartShow'])
	},
	methods: {
		...mapMutations(['setCartShow']),
		hideCart() {
			this.$store.commit('setCartShow')
		},
		getOrdreMode() {
			axios.get('/order/variety/getOrdreMode.do').then(res => {
				res = res.data
				if (res.code == 200) {
					// Object.keys(res.data).map((value,idx) => {
					// 	modes.push(res.data[value].modeName)
					// });
					// this.mode = modes;
					this.mode = res.data[2].pOrderRange + 1
				}
			})
		},
		moveStart() {
			document.documentElement.style.overflow = 'hidden'
		},
		moveEnd() {
			document.documentElement.style.overflow = 'scroll'
		}
	}
}
</script>
<style scoped lang='scss'>
.toast-cart {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 99;
}
.cart * {
	touch-action: manipulation !important;
}
.cart {
	background-color: #fff;
	position: absolute;
	width: 100%;
	bottom: 0;
	z-index: 99;
	height: rem(415px);
	overflow-y: scroll;
}
.nav {
	position: relative;
	width: 100%;
	height: rem(30px);
}
.nav .content {
	width: 65%;
	margin: 0 auto;
	height: rem(30px);
	position: relative;
}
.nav .close {
	position: absolute;
	top: -2px;
	right: 0;
}
.nav .content ul {
	width: 100%;
	border-radius: rem(15px);
}
.nav ul li.item {
	width: auto;
	height: auto;
	width: 33.33%;
}
.nav ul li.active {
	color: #e9c696;
}

.line {
	border-bottom: rem(7px) solid #f3f3f3;
}
input {
	font-size: rem(13px);
}
.slide-fade-enter-active {
	transition: all 0.2s ease;
}
.slide-fade-leave-active {
	transition: all 0.2s ease;
}
.slide-fade-enter, .slide-fade-leave-to
		/* .slide-fade-leave-active for below version 2.1.8 */ {
	transform: translateY(100%);
}
</style>